{% extends 'base/base1.html' %}
{% load static %}

{% block title %}管理仪表板{% endblock %}

{% block css %}
<style>
    .dashboard-header {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 30px;
        border-radius: 15px;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .stats-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 30px;
        margin-bottom: 20px;
        text-align: center;
        transition: transform 0.3s ease;
        border-left: 5px solid #667eea;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
    }
    
    .stats-icon {
        font-size: 2.5rem;
        color: #667eea;
        margin-bottom: 15px;
    }
    
    .stats-number {
        font-size: 2.5rem;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 5px;
    }
    
    .stats-label {
        color: #6c757d;
        font-size: 1rem;
        font-weight: 500;
    }
    
    .chart-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 25px;
        margin-bottom: 20px;
    }
    
    .chart-card h4 {
        color: #2c3e50;
        margin-bottom: 20px;
        font-weight: 600;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 10px;
    }
    
    .low-stock {
        background: #dc3545;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: bold;
    }
    
    .table {
        margin-bottom: 0;
    }
    
    .table th {
        border-top: none;
        background: #f8f9fa;
        font-weight: 600;
        color: #2c3e50;
    }
    
    .badge {
        padding: 8px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
    }
    
    .btn-outline-primary {
        border-radius: 20px;
        padding: 5px 15px;
    }
    
    .product-item {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 10px;
        border-left: 4px solid #dc3545;
    }
</style>
{% endblock %}

{% block main %}
<div class="container-fluid">
    <div class="dashboard-header">
        <h1><i class="fas fa-chart-line"></i> 管理仪表板</h1>
        <p>欢迎回来，{{ request.user.username }}!</p>
    </div>
    
    <!-- 统计卡片 -->
    <div class="row">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-icon"><i class="fas fa-box"></i></div>
                <div class="stats-number">{{ total_products }}</div>
                <div class="stats-label">商品总数</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-icon"><i class="fas fa-users"></i></div>
                <div class="stats-number">{{ total_users }}</div>
                <div class="stats-label">用户总数</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-icon"><i class="fas fa-shopping-cart"></i></div>
                <div class="stats-number">{{ total_orders }}</div>
                <div class="stats-label">订单总数</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-icon"><i class="fas fa-tags"></i></div>
                <div class="stats-number">{{ total_categories }}</div>
                <div class="stats-label">分类总数</div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- 订单状态统计 -->
        <div class="col-md-6">
            <div class="chart-card">
                <h4>订单状态统计</h4>
                <table class="table">
                    <thead>
                        <tr>
                            <th>状态</th>
                            <th>数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for stat in order_stats %}
                        <tr>
                            <td>{{ stat.status }}</td>
                            <td>{{ stat.count }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="2" class="text-center">暂无数据</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 低库存商品 -->
        <div class="col-md-6">
            <div class="chart-card">
                <h4><i class="fas fa-exclamation-triangle"></i> 低库存商品 (≤10件)</h4>
                <div style="max-height: 300px; overflow-y: auto;">
                    {% for product in low_stock_products %}
                    <div class="product-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ product.name }}</strong>
                                <br>
                                <small class="text-muted"><i class="fas fa-tag"></i> {{ product.category }}</small>
                            </div>
                            <div class="low-stock">
                                {{ product.stock }} 件
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-check-circle" style="font-size: 2rem; color: #28a745;"></i>
                        <p class="mt-2">所有商品库存充足</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- 最新订单 -->
    <div class="row">
        <div class="col-md-12">
            <div class="chart-card">
                <h4>最新订单</h4>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>用户</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in recent_orders %}
                            <tr>
                                <td>{{ order.order_number }}</td>
                                <td>{{ order.user.username }}</td>
                                <td>
                                    <strong>￥{{ order.total_amount }}</strong>
                                    <br><small class="text-muted">{{ order.product.name }}</small>
                                </td>
                                <td>
                                    <span class="badge badge-info">{{ order.get_status_display }}</span>
                                </td>
                                <td>{{ order.created_at|date:"m-d H:i" }}</td>
                                <td>
                                    <a href="{% url 'main:order_detail' order.pk %}" class="btn btn-sm btn-outline-primary">查看</a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center">暂无订单</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="text-center">
                    <a href="{% url 'main:order_list' %}" class="btn btn-primary">查看所有订单</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}